<template>
	<div class="singledetail">
		<div class="sing-title-icon" @click="back" title="返回上一步操作"></div>
		
		<!-- 用户信息 -->
		<div v-if="parameter.indexOf('user_id')>0" class="sing-shops">
		
			<h3>个人信息</h3>
			
			<div class="sing-shops-user">
				<div>真实姓名：{{transfer.realname}}</div>
				<!-- <div>微信名：{{transfer.nickName}}</div> -->
				<div class="s-s-u-img"><img :src="transfer.avatarUrl"><p>{{transfer.nickName}}</p></div>
				<div><p class="ws27">性 别</p>：<p v-if="transfer.gender==0">未知</p><p v-else-if="transfer.gender==1">女</p><p v-else>男</p></div>
				<div>注册时间：{{transfer.create_time}}</div>
				<div class="s-s-u-consumption">消费金额：<p>{{transfer.pay_money}}</p></div>
				<div class="s-s-u-consumption">总订单数：<p>{{transfer.pay_order}}</p></div>
				<div>用户手机：{{transfer.mobile}}</div>
			</div>
		
		</div>
		
		<!-- 优惠券详细 -->
		<div v-if="parameter.indexOf('coupon_id')>0" class="sing-shops">
			<h3>优惠券详情页</h3>
			<div class="sing-shops-coupon">
				<div>优惠券名称：{{transfer.name}}</div>
				<div>优惠券类型：{{transfer.coupon_type}}</div>
				<div v-if="transfer.coupon_type == '满减券'"><p class="ws1">减 免 金 额</p>：{{transfer.reduce_price}}</div>
				<div v-else-if="transfer.coupon_type == '折扣券'"><p class="ws5">折 扣 率</p>：{{transfer.discount}}</div>
				<div><p class="ws1">最 低 消 费</p>：{{transfer.min_price}}</div>
				<div><p class="ws1">使 用 规 则</p>：{{transfer.rule}}</div>
				<div v-if="transfer.rule == 0">有门槛时的最低消费：{{transfer.rule_min_money}}</div>
			</div>
		</div>
		
		<!-- 商品详细 -->
		<div v-if="parameter.indexOf('goods_id')>0" class="sing-shops">
			<h3>商品详情页</h3>
			<div class="sing-shops-goods">
				<div class="s-s-g-img"><img :src="urlsite+'/'+transfer.wxapp_id+'/'+transfer.file_name"></div>
				
				<div class="s-s-g-text">
					<div><p class="ws1">商 品 名 称</p>：{{transfer.goods_name}}</div>
					<div><p class="ws1">商 品 价 格</p>：{{transfer.goods_price}}</div>
					<div>商品划线价：{{transfer.line_price}}</div>
				</div>
				
			</div>
		</div>
		
		<!-- 店铺详细 -->
		<div v-if="parameter.indexOf('bus_id')>0" class="sing-shops">
			<h3>{{transfer.name}}</h3>
			<div class="s-shops-introduce">简介：<p>{{transfer.describe}}</p></div>
			<div class="sing-shops-flux">
				<div class="s-s-flux-sale">销售额：<p>{{transfer.salenum}}</p></div>
				<div class="s-s-flux-sale">浏览次数：<p>{{transfer.viewed}}</p></div>
				
			</div>
			
			<div class="sing-shops-datum">
				
				<div class="s-s-da-son">
					<div>联系人：{{transfer.contacts}}</div>
					<div><p class="ws12">电 话</p>：{{transfer.telephone}}</div>
					<div><p class="ws12">微 信</p>：{{transfer.wechat}}</div>
					<div><p class="ws12">地 址</p>：{{transfer.address}}</div>
				</div>
				
				<div class="s-s-da-son">
					<div><p class="ws1">入 驻 时 间</p>：{{transfer.create_time}}</div>
					<div><p class="ws1">银 行 卡 号</p>：{{transfer.bank_num}}</div>
					<div>持卡人姓名：{{transfer.bank_name}}</div>
				</div>
			</div>
			
		</div>
	</div>
</template>

<script>
	import {date} from "../js/time.js"
	export default{
		data(){
			return{
				transfer: [], //接受接口数据的页面数据渲染的数组
				parameter:''  ,//上传的参数
				urlsite: 'https://wutong.izhuodata.top/addons/weliam_areashop/web/uploads/'  //商品详情的图片网络地址，用于拼接文件所在地目录使用
			}
		},
		methods:{
			//路由的回退功能
			back(){
				this.$router.go(-1);//返回上一层
			},
			// 用来转换接口拿到的数据的赋值函数，暂时不做判断，可用于时间、性别、距离、地区的数据转换
			dispose(resp){
				console.log("函数调用成功")
				let data = resp.config.data
				let tran = this.transfer
				// 判断数据来源的接口，用作接口获取的数据处理
				if(data.indexOf('user_id')>0){
					console.log("用户判断生效")
				}
				//处理优惠券接口的数据
				else if(data.indexOf('coupon_id')>0){
					//优惠券类型
					switch(tran.coupon_type){
						case "10": 
							tran.coupon_type = "满减券" 
							break;
						case "20": 
							tran.coupon_type = "折扣券"
							break;
						case "30": 
							tran.coupon_type = "运费券"
							break;
						case "40":
							tran.coupon_type = "随机券"
							break;
						default:  break
					}
					//优惠券门槛
					if(tran.rule === 0){
						tran.rule = "有门槛"
					}else{
						tran.rule = "无门槛"
					}
					console.log("优惠券接口数据转换后的数据",tran)
				}
				//处理商品接口的数据
				else if(data.indexOf('goods_id')>0){
					console.log("商品数据暂无需要转换的数据")
				}
				//处理店铺信息的数据
				else{
					//时间转换
					tran.create_time = date(tran.create_time)
				}
			}
		},
		//在模板渲染成html后调用的生命周期函数
		mounted() {
			const that = this
			const axios = require('axios');
			that.parameter = JSON.stringify(this.$route.query) //上传的参数，转换JSON格式，防止bug
			// 根据上一页面传过来的参数判断后调用不同的接口
			if(that.parameter.indexOf('user_id')>0){
				var api = '/api/api/coupon/user_details.php'
			}else if(that.parameter.indexOf('coupon_id')>0){
				var api = '/api/api/coupon/coupon_details.php'
			}else if(that.parameter.indexOf('goods_id')>0){
				var api = '/api/api/coupon/goods_details.php'
			}else{
				var api = '/api/api/coupon/business_details.php'
			}
			axios({
				method: 'post',
				url: api,
				headers: { "Content-Type": "application/JSON" },
				data: that.parameter
			}).then(resp=>{
				// console.log(resp)
				that.transfer = resp.data.data
				that.dispose(resp)//接口数据传递到数据处理函数
			}).catch(err=>{
				console.log(err)
			})
		}
	}
</script>

<style>
	img{
		width: 100%;
		height: 100%;
	}
	.singledetail{
		width: 100%;
		min-width: 922px;
		height: 100%;
		padding: 50px;
		background-color: #ffffff;
		box-sizing: border-box;
	}
	div.singledetail>div.sing-shops>h3{
		text-align: center;
		padding-bottom: 50px;
		color: #409EFF;
	}
	/* 回退 */
	.sing-title-icon{
		width: 20px;
		height: 20px;
		background: url(../assets/return.png);
		transform: translate(-30px,-35px);
	}
	/* 个人信息、优惠券详情、商品详情三个的布局 */
	.sing-shops{
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	/* 用户信息和优惠券详情布局类似写在一起 */
	.sing-shops-user,.sing-shops-coupon{
		min-width: 210px;
		line-height: 60px;
		margin: 0 auto;
		font-size: 16px;
	}
	.s-s-u-img>img{
		width: 60px;
		height: 60px;
		vertical-align: middle;
		border-radius: 5px;
	}
	.s-s-u-img>p{
		padding-left: 20px;
		font-size: 16px;
		color: #409EFF;
		font-weight: 600;
	}
	.s-s-u-consumption>p{
		color: red;
	}
		
	/* 商品详情 */
	.sing-shops-goods{
		display: flex;
		justify-content: center;
		font-size: 16px;
	}
	.s-s-g-img{
		width: 180px;
		height: 180px;
		margin-right: 30px;
	}
	.s-s-g-text{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 180px;
	}
	
	/* 店铺详细 */
	.s-shops-introduce{
		text-align: center;
		margin-bottom: 50px;
		font-size: 13px;
		color: #909399;
	}
	.s-shops-introduce>p{
		font-size: 18px;
		color: #000000;
	}
	.sing-shops-flux{
		display: flex;
		justify-content: space-evenly;
		margin-bottom: 50px;
	}
	.s-s-flux-sale{
		font-size: 13px;
		color: #909399;
	}
	div.s-s-flux-sale>p{
		font-size: 18px;
		color: #ff0000;
	}
	.sing-shops-datum{
		display: flex;
		justify-content: space-around;
	}
	.s-s-da-son{
		text-align: left;
		line-height: 60px;
	}
</style>
